<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>空调管理</el-breadcrumb-item>
      <el-breadcrumb-item>测试界面</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
  
      <!-- 用户列表信息区域 -->
      <el-table :data="userList" style="width: 100%" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="位置" prop="id"></el-table-column>
        <el-table-column label="教室" prop="class"></el-table-column>
        <el-table-column label="教室温度" prop="tem_now"></el-table-column>
        <!-- 状态开关切换区域 -->
        <el-table-column label="状态（led模拟）">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state" @change="userStatusChanged(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" 
                       icon="el-icon-edit" 
                       circle
                       @click="showEditDialog(scope.row.id)">
            </el-button>
            <!-- 删除按钮 -->
            <el-button @click="deleteList(scope.row.id)" type="danger" icon="el-icon-delete" circle></el-button>
            <!-- 分配角色按钮 -->
            <el-tooltip content="分配角色" placement="top" :enterable="false">
              <el-button type="warning"
                         icon="el-icon-setting" 
                         circle
                         @click="setRole(scope.row)"></el-button>
            </el-tooltip>
            <!-- {{scope.row.id}} -->
          </template>
        </el-table-column>
      </el-table>
      
    </el-card>

   


  </div>
</template>

<script>
export default {
  data() {
    // 验证邮箱的正则表达式
    var checkEmail = (rule, value, callback) => {
      const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if(reg.test(value)){
        return callback()
      }
      callback(new Error('请输入合法的邮箱'))
    }
    // 验证手机号的正则表达式
    var checkPhone = (rule, value, callback) => {
      const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('手机号码格式不正确'))
      }
    }

    return {
      userList: [
        {
          "id": "01A101",
          "class": "安保值班室",
          "mobile": "18616358651",
          "tem_set": "28℃",
          "tem_now": "28℃",
          "create_time": "2017-11-09T20:36:26.000Z",
          "state": true, // 当前用户的状态
        }
      ],
      subscribe: {
        topic:'led_status',
        clientid:'stm32'
      },
      publish: {
        topic:'led_status',
        clientid:'stm32',
        payload: '',
        qos:0
      }
    }
  },
  created() {
    this.subscribeLed()
  },
  methods: {
    // 监听switch状态改变
    userStatusChanged(userInfo) {
      if(userInfo.state === true){
        this.publish.payload = '{{"ledstatus":1}}'
      }else if(userInfo.state === false){
        this.publish.payload = '{{"ledstatus":0}}'
      }
      this.publishLed()
      // console.log(statuserInfou)
      // const { data: res } = await this.$http.put(
      //   `users/${userInfo.id}/state/${userInfo.state}`
      // )
      // if (res.meta.status !== 200) {
      //   userInfo.mg_state = !userInfo.mg_state
      //   return this.$message.error('更新用户状态失败！')
      // }
      // this.$message.success('更新用户状态成功')
    },
    async subscribeLed(){
      const { data: res } = await this.$http.post('/v4/mqtt/subscribe', this.subscribe)
      console.log(res)
    },
    async publishLed(){
      const { data: res } = await this.$http.post('/v4/mqtt/publish', this.publish)
      console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
